import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet,
    TextInput
} from 'react-native';

import {
    Tip,
    File,
    Press,
    Layout,
    Button,
    Choose,
    Loading,
    Dialog,
    FastImage
} from './../../components';

import {
    Actions
} from 'react-native-router-flux';

import ajax from './../../http';

import * as CONST from './../../const';
import Connect from './../../utils/connect';

import close_icon from './../../images/close.png';

interface State {
    imageList: any,
    content: string
}

interface Props {
    user:any
}

const _placeholder = `Tell us about your problem. Please be as descriptive as possible.`;
const _message = `We have received your email and will reply to you within 24 hours. Sorry for the inconvenience and thank you for your feedback!`;
const _tip = `We will reply to you within 24 working hours.`

@Connect([`user`])
class Contact extends PureComponent<Props, State> {
    state = {
        email: ``,
        content: ``,
        imageList: []
    }

    static defaultProps = {
        user:{}
    }

    get userState() {
        const {
            user
        } = this.props;
        return user;
    }

    get userInfo() {
        const {
            loginUser
        } = this.userState;
        return loginUser || {}
    }

    get email() {
        const {
            email
        } = this.userInfo;
        return email;
    }

    private _uploadFile = async ({path}:any) => {
        const {
            imageList
        } = this.state;

        Loading.show();

        try {
            const item = (
                await ajax.uploadImage(path)
            )
            imageList.push({
                ...item,
                path: path
            } as never)
            this.setState({
                imageList: [...imageList]
            })
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close()
    }

    private _onDeleteRow = (i:number) => {
        const {
            imageList
        } = this.state;
        imageList.splice(i, 1);
        this.setState({
            imageList: [...imageList]
        })
    }

    get attachIds() {
        const {
            imageList
        } = this.state;
        return imageList.map((item:any) => item.id);
    }

    private _onSubmit = async () => {
        const {
            content
        } = this.state;

        const _para = {
            message: content,
            attachIds: this.attachIds,
            subject: `Feedback from: ${this.email}`
        }

        Loading.show();

        try {
            await ajax.post(
                `feedback`, _para
            )
            Dialog.alert({
                message: _message,
                title: `Feedback send successful`
            }).then(() => Actions.pop())
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }

        Loading.close()
    }

    private _onContentChange = (text: string) => {
        this.setState({
            content: text
        })
    }

    get disabled() {
        const {
            content = ``
        } = this.state;
        return  !content.trim();
    }

    render() {
        const {
            content,
            imageList
        } = this.state;

        return (
            <Layout fixed={true} title="Contact Us">
                <View style={styles.container}>
                    <View style={styles.itemRow}>
                       <TextInput
                           value={content}
                           multiline={true}
                           style={styles.textArea}
                           placeholder={_placeholder}
                           placeholderTextColor="#999"
                           onChangeText={this._onContentChange}
                       />
                    </View>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            Attach screenshots if any.
                        </Text>
                        <View style={styles.files}>
                            <File onChange={this._uploadFile}>
                                <Choose
                                    style={styles.chooseStyle}
                                />
                            </File>
                            {imageList.map((item:any, i:number) => (
                                <View
                                    key={i}
                                    style={styles.fileStyle}
                                >
                                    <FastImage
                                        url={item.path}
                                        style={styles.imageStyle}
                                    />
                                    <Press
                                        value={i}
                                        style={styles.deleteRow}
                                        onPress={this._onDeleteRow}
                                    >
                                        <Image
                                            source={close_icon}
                                            style={styles.deleteImage}
                                        />
                                    </Press>
                                </View>
                            ))}
                        </View>
                    </View>
                    <Button
                        title="Send"
                        style={styles.submit}
                        disabled={this.disabled}
                        onPress={this._onSubmit}
                    />
                    <Text style={styles.tipText}>
                        {_tip}
                    </Text>
                </View>
            </Layout>
        )
    }
}

export default Contact;

const styles = StyleSheet.create({
    container: {
        paddingVertical: 16
    },
    textArea: {
        padding: 16,
        height: 168,
        fontSize: 16,
        color: `#333`,
        borderRadius: 4,
        backgroundColor: `#fff`,
        textAlignVertical: 'top'
    },
    chooseStyle:{
        width: 64,
        height: 64,
        borderRadius: 8
    },
    itemRow:{
        marginBottom:24
    },
    submit: {
        marginTop: 12
    },
    title:{
        fontSize:14,
        color:`#8A92AE`,
        marginBottom:12
    },
    files: {
        flexDirection: `row`
    },
    imageStyle: {
        width: 64,
        height: 64,
        borderRadius: 8,
        overflow: `hidden`
    },
    fileStyle: {
        marginLeft: 16
    },
    deleteRow: {
        top: -4,
        right: -4,
        width: 18,
        height: 18,
        borderRadius: 9,
        position: `absolute`,
        alignItems: `center`,
        justifyContent: `center`,
        backgroundColor: CONST.color
    },
    deleteImage: {
        width: 8,
        height: 8
    },
    tipText: {
        color: `#61677C`,
        fontSize: 14,
        textAlign:`center`,
        lineHeight: 18,
        paddingVertical: 18
    }
}) as any;